<template>
	<view class="search-wrap">
		<view class="flex-1">
			<u-search
				v-model="searchCode"
				:clearabled="true"
				height="64rpx"
				:showAction="false"
				searchIconColor="#4E5969"
				searchIconSize="24"
				placeholder-color="#C9CDD4"
				:placeholder="placeholder"
				bg-color="#F1F2F5"
				:inputStyle="{ fontSize: '24rpx' }"
				@search="search"
				@clear="search"
			/>
		</view>
		<view v-if="searchCode" class="ml-32 fs-32" @click="search">搜索</view>
	</view>
</template>
<script setup lang="ts">
defineProps({
	placeholder: String,
})
const emit = defineEmits(["search"])
const searchCode = ref("")
const search = () => {
	emit("search", searchCode.value)
}
</script>
<style lang="scss" scoped>
.search-wrap {
	padding: 12rpx 24rpx;
	background: $c-white;
	height: 88rpx;
	display: flex;
	align-items: center;
}
</style>
